<template>
  <BasicModal v-bind="$attrs" @ok="handleOk" @register="registerModal">
    <BasicForm @register="registerForm">
      <template #price="{ model, field }">
        <div class="flex-row-center-start">
          <InputNumber style="width: 200px" v-model:value="model[field]" />
          <span style="margin-left: 10px">{{ priceUnitText }}</span>
        </div>
      </template>
      <template #mapQuotationListId>
        {{ keyValueBizMetaAttrText }}
      </template>
    </BasicForm>
  </BasicModal>
</template>

<script setup lang="ts">
  import mcApi from 'mc-c2b2m-operator-api';
  import { computed, ref, unref } from 'vue';
  import { InputNumber } from 'ant-design-vue';
  import { detailModalFormSchema } from './data';
  import { priceUnitList } from '@/enums/spuEnum';
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicForm, useForm } from '@/components/Form';
  import { BasicModal, useModalInner } from '@/components/Modal';

  const { SpuModule } = mcApi;
  const { QuotationApi } = SpuModule;

  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
    labelWidth: 150,
    schemas: detailModalFormSchema,
    baseColProps: { span: 22 },
    showActionButtonGroup: false,
  });

  // 所属映射报价表对象
  const mapQuotationList = ref<any>({});
  // 计价单位文本
  const priceUnitText = computed(() => {
    const { priceUnit } = mapQuotationList.value;
    return priceUnitList.find((find) => find.value === Number(priceUnit))?.label;
  });
  // 映射KEY业务元属性值
  const keyValueBizMetaAttrText = computed(() => {
    const { keyBizMetaAttrList } = mapQuotationList.value;
    return keyBizMetaAttrList?.map?.((item: any) => item.cnName)?.join?.('，');
  });
  const ifUpdate = ref<boolean>(false);
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    await resetFields();
    ifUpdate.value = !!data.ifUpdate;
    mapQuotationList.value = data.mapQuotationList;
    setModalProps({
      minHeight: 50,
      confirmLoading: false,
      title: `${ifUpdate.value ? '编辑' : '新增'}映射报价条目`,
    });
    await setFieldsValue({ mapQuotationListId: mapQuotationList.value.id });
    if (unref(ifUpdate)) {
      await setFieldsValue({
        ...data.record,
        bizMetaAttrIdList: data.record['bizMetaAttrList'].map((item: any) => {
          const { id, cnName } = item;
          return {
            value: id,
            label: cnName,
          };
        }),
        keyValueBizMetaAttrIdList: data.record['keyValueBizMetaAttrList'].map((item: any) => {
          const { id, cnName } = item;
          return {
            value: id,
            label: cnName,
          };
        }),
      });
    }
  });

  const { createMessage } = useMessage();
  const emits = defineEmits(['success']);
  async function handleOk() {
    try {
      const values: any = await validate();
      setModalProps({ confirmLoading: true });
      const { bizMetaAttrIdList, keyValueBizMetaAttrIdList } = values;
      values.bizMetaAttrIdList = bizMetaAttrIdList.map((item: any) => item.value);
      values.keyValueBizMetaAttrIdList = keyValueBizMetaAttrIdList.map((item: any) => item.value);
      const fun = unref(ifUpdate)
        ? QuotationApi.updateMapQuotationListItem
        : QuotationApi.createMapQuotationListItem;
      await fun(values);
      createMessage.success(`${unref(ifUpdate) ? '编辑' : '新增'}成功！`);
      emits('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>

<style scoped lang="less"></style>
